<template>
    <div class="right">
        <div class="right-top">
            <div
                class="lesson"
                v-for="(item, index) in arr"
                :key="index"
                @click="selectName = item.url"
            >
                <span :class="{ active: isSelect == item.url }" @click="checkCard(item)">
                    {{ item.name }}
                </span>
            </div>
            <div class="creat" @click="erweima">创建</div>
        </div>
        <rightBottom :course="isSelect"></rightBottom>
    </div>
</template>

<script setup lang="ts">
import rightBottom from './card.vue';
import { ref, watch } from 'vue';
import { Search } from '@element-plus/icons-vue';
import mockApi from '@/api/mockApi';
import { ElMessageBox } from 'element-plus';
const selectName = ref('');
const input = ref('');
const isSelect = ref('');
const arr = ref([
    {
        name: '全部',
        isSelect: false,
        url: '',
    },
    {
        name: '我创建的',
        isSelect: false,
        url: 'myListCategory=my_create',
    },
    {
        name: '我加入的',
        isSelect: false,
        url: 'myListCategory=my_join',
    },
    {
        name: '我课程的',
        isSelect: false,
        url: 'myListCategory=my_course',
    },
]);
const erweima = () => {
    ElMessageBox.alert(
        `<div>
            <div>请打开 中舞网APP 扫码,使用此功能</div>
            <div>扫描此二维码，同样可下载
“中舞网APP”</div>
            </div>
    `,
        '',
        {
            dangerouslyUseHTMLString: true,
            showConfirmButton: false,
            closeOnClickModal: true,
        }
    );
};
const checkCard = (item: any) => {
    isSelect.value = item.url;
};
watch(selectName, () => {}, { immediate: true });
</script>

<style scoped lang="less">
.right {
    width: 1020px;
    display: block;
    // background-color: #f95;

    padding: 0 10px;
}
.right-top {
    display: flex;
    background-color: #fff;
    position: relative;
    border-radius: 4px;
    padding: 20px 30px;
    align-items: center;
}
.creat {
    position: absolute;
    top: 36px;
    right: 84px;
    background: #f93684;
    height: 30px;
    width: 78px;
    border-radius: 21px;
    text-align: center;
    line-height: 30px;
}
.lesson {
    height: 40px;
    line-height: 40px;
    float: left;
    color: #111;
    font-size: 14px;
    position: relative;
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin-right: 14px;
}
.lesson > span {
    padding: 7px 15px;
    border-radius: 7px;
    &.active {
        background-color: #f93684;
        color: aliceblue;
    }
}
</style>
